<template>
  <div class="web_socket" :class="{is_show: isHide}">
    <div class="info_header">
      <span :class="tabToggle===1 ? 'active': ''" @click="tabToggle=1">待办任务</span>
      <span :class="tabToggle===2 ? 'active': ''" @click="tabToggle=2">系统通知</span>
    </div>
    <div class="info_cont">
      <!--<el-button @click="_login">登录</el-button>
      <el-button @click="_send">让服务器发送消息</el-button>-->
      <div v-for="(item, index) in msg" :key="index">{{item}}</div>
      <div class="info_content" v-for="(item, index) in test" :key="index">
        <p><i></i>{{item}}赵丽颖发起反馈这是一条成功的提示消息这是一条成功的提示消息这是一条成功的提示消息这是一条成功的提示消息这是一条成功的提示消息这是一条成功的提示消息</p>
        <span>2018-12-30 12:00:00</span>
      </div>
      <div class="message_empty">
        <img src="@/assets/img/message_empty.png" alt="">
        <span>{{tabToggle===1 ? '暂无待办任务' : '暂无系统通知'}}</span>
      </div>
    </div>
    <div class="info_footer" @click="goToMessageList">查看全部</div>
    <div class="unfold_btn" @click="isHide = !isHide" v-if="!isHide">
      <!--<i class="iconfont icon-arrow_shouqi" v-if="isHide"></i>-->
      <i class="iconfont icon-arrow_zhankai"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WebSocket',
  data() {
    return {
      isHide: true,
      stompClient: '',
      timer: '',
      socket: null,
      msg: [],
      test: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      tabToggle: 1, // tab索引
    }
  },
  mounted() {
    this._login()
  },
  beforeDestroy() {
    // 页面离开时断开连接,清除定时器
    this.disconnect();
    clearInterval(this.timer);
  },
  methods: {
    // 打开弹窗
    openMessage() {
      this.isHide = !this.isHide
    },
    // 初始化
    initWebSocket() {
      this.connection();
      let that = this;
      // 断开重连机制,尝试发送消息,捕获异常发生时重连
      this.timer = setInterval(() => {
        try {
          that.socket.send('test');
        } catch (err) {
          this.msg.push('断线了: ' + err)
          that.connection();
        }
      }, 5000);
    },
    //连接 后台
    connection() {
      // 建立连接对象
      this.socket = new WebSocket('ws://192.168.3.44:8080/websocket/socketServer.do')
      this.socket.onopen = this.onOpen;
      this.socket.onmessage = this.onMessage;
      this.socket.onerror = this.onError;
      this.socket.onclose = this.onClose;
    },
    // 连接成功后回调
    onOpen(e) {
      if (this.socket.readyState === this.socket.OPEN) {
        let msg = '登录'
        this.socket.send(msg)
        this.msg.push('mes链接webSocket成功')
      } else {
      }
    },
    // 接收后台消息
    onMessage(e) {
      this.msg.push(e.data)
    },
    onClose() {},
    onError() {},
    // 注册webScoket 用户表
    _login() {
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/webmessage/webMessage/login?username=mes',
        noCommit: true
      }).then(res => {
        this.msg.push('mes注册成功')
        this.initWebSocket()
      })
    },
    // 发送消息
    _send() {
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/webmessage/webMessage/login?username=mes',
        noCommit: true
      }).then(res => {
        this.connection()
      })
    },
    // 跳转到详情页
    goToMessageList() {
      this.$router.push('message')
      this.isHide = true
    }
  },
}
</script>

<style scoped lang="less">
  .web_socket{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #fff;
    border-left: @mesBorDefault;
    transition: all .3s;
    z-index: 100;
    padding: 15px;
    box-sizing: border-box;
    &.is_show{
      right:-400px
    }
    .info_header{
      height: 40px;
      background-color: #ffffff;
      border-radius: 2px;
      text-align: center;
      display: flex;
      align-items: center;
      font-size: 16px;
      cursor:pointer;
      margin-bottom: 2px;
      span{
        display:block;
        line-height: 40px;
        color: #7e8e9f;
        width: 50%;
        border: solid 1px #dcdfe6;
        user-select: none;
        transition: all 0.1s ease-in;
        &:first-child{
          border-right:none;
        }
        &.active{
          background-color: #00b4ff;
          color:#fff;
          border-color:#00b4ff;
        }
      }
    }
    .info_cont{
      width: 100%;
      height: calc(100% - 42px);
      overflow: auto;
      &::-webkit-scrollbar {
        /*滚动条*/
        width: 17px;
        height: 17px;
        cursor: pointer;
        margin-left: 4px;
      }
      &::-webkit-scrollbar-thumb {
        /*小方块*/
        border-radius: 16px;
        box-shadow: @mesTableScrollThumbShow;
        background: @mesTableScrollThumbBg;
        cursor: pointer;
        border: @mesTableScrollThumbBorder;
      }
      &::-webkit-scrollbar-thumb:hover {
        cursor: pointer;
      }
      &::-webkit-scrollbar-track {
        /*轨道*/
        width: 17px;
        background: @mesTableScrollTrackBg;
      }
      &r::-webkit-scrollbar-track:hover {
        cursor: pointer;
      }
      .info_content{
        padding: 15px;
        position: relative;
        border-bottom: solid 1px #dcdfe6;
        i{
          display: inline-block;
          width: 8px;
          height: 8px;
          background-color: #f8000f;
          border-radius: 50%;
          position: absolute;
          top:20px;
          left:0;
        }
        p{
          color: #333333;
          font-size: 14px;
          cursor:pointer;
          &:hover{
            color: #0066cc;
          }
        }
        span{
          color:#999;
          font-size: 12px;
        }
      }
      .message_empty{
        width: 120px;
        margin: 0 auto;
        color: #a1b1c1;
        font-size:14px;
        text-align: center;
        img{
          width: 120px;
          height: 120px;
          margin-top: 100px;
        }
      }
    }
    .info_footer{
      width: 100%;
      border-top: solid 1px #dcdfe6;
      background-color: #fff;
      line-height: 60px;
      text-align: center;
      color: #7e8e9f;
      font-size: 16px;
      cursor:pointer;
      position: absolute;
      bottom:0;
      left:0;
    }
    .unfold_btn {
      color: #333;
      cursor: pointer;
      position: absolute;
      width: 16px;
      height: 50px;
      line-height: 50px;
      left: -17px;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: #f8f8f9;
      border: @mesBorDefault;
      border-right: none;
      border-radius: 4px 0 0 4px;
      box-sizing: border-box;
    }
  }
</style>
<style>
  .self_message_icon{
    color:#f8000f;
  }
</style>
